<script setup lang="js">
import {
  defineProps
} from "vue";

const props = defineProps({
  line: {
    type: Number,
    default: 1
  },
  type: {
    type: String,
    default: "default"
  }
});
</script>
<template>
  <div class="base-skeleton" :class="`base_${ props.type }_skeleton`">
    <template
      v-for="v in props.line" :key="v"
    >
      <template v-if="props.type === 'default'">
        <div class="skeleton__item" style="width: 40%;"></div>
        <div class="skeleton__item" style="width: 100%;"></div>
        <div class="skeleton__item" style="width: 100%;"></div>
        <div class="skeleton__item" style="width: 60%;"></div>
      </template>
      <template v-else-if="['platforms'].includes(props.type)">
        <div :class="`skeleton__item skeleton_${ props.type }_item`"></div>
        <div :class="`skeleton__item skeleton_${ props.type }_item`"></div>
        <div :class="`skeleton__item skeleton_${ props.type }_item`"></div>
        <div :class="`skeleton__item skeleton_${ props.type }_item`"></div>
        <div :class="`skeleton__item skeleton_${ props.type }_item`"></div>
      </template>
    </template>
  </div>
</template>
<style lang="scss" scoped>
@keyframes skeletonLoading {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.base-skeleton {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  margin: 0 auto;
  width: 90%;
  &.base_platforms_skeleton {
    width: calc(100% - 48px);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: flex-start;
  }
  .skeleton__item {
    width: 100%;
    height: 15px;
    border-radius: 10px;
    background: linear-gradient(-120deg,rgba(240,242,245,.1) 25%,rgba(207,209,211,.3) 37%,rgba(240,242,245,.1) 63%);
    background-size: 400% 100%;
    animation: skeletonLoading 1.2s ease infinite;
    &.skeleton_platforms_item {
      margin-top: 15px !important;
      width: 128px;
      height: 128px;
    }
  }
  .skeleton__item + .skeleton__item {
    margin-top: 10px;
  }
}
</style>